<template>
    <div class="feedback-section">
        <h3>用户反馈</h3>

        <!-- 反馈表单 -->
        <el-form :model="form" label-width="100px" class="feedback-form" @submit.native.prevent="submitFeedback">
            <el-form-item label="反馈类型" :rules="{ required: true, message: '请选择反馈类型', trigger: 'change' }">
                <el-select v-model="form.feedbackType" placeholder="请选择反馈类型" @change="handleFeedbackTypeChange">
                    <el-option label="期刊" value="journal" />
                    <el-option label="意见" value="opinion" />
                </el-select>
            </el-form-item>

            <!-- 仅当反馈类型为“期刊”时显示期刊选择器 -->
            <el-form-item label="期刊" v-if="form.feedbackType === 'journal'"
                :rules="{ required: true, message: '请选择期刊', trigger: 'change' }">
                <el-select v-model="form.selectedJournalId" placeholder="请选择期刊">
                    <el-option v-for="journal in journals" :key="journal.journal_id" :label="journal.journal_name"
                        :value="journal.journal_id" />
                </el-select>
            </el-form-item>

            <el-form-item label="反馈内容" :rules="{ required: true, message: '请输入反馈内容', trigger: 'blur' }">
                <el-input type="textarea" v-model="form.feedbackContent" placeholder="请输入反馈内容" :rows="4" />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" class="submit-btn" @click="submitFeedback">提交反馈</el-button>
            </el-form-item>
        </el-form>

        <!-- 反馈列表 -->
        <h3>反馈列表</h3>
        <el-table :data="feedbackList" stripe class="feedback-table" v-if="feedbackList.length">
            <el-table-column prop="content" label="反馈内容" min-width="300" />
            <el-table-column prop="status" label="状态" min-width="120">
                <template #default="{ row }">
                    <el-tag :type="getStatusTagType(row.status)">
                        {{ getStatusLabel(row.status) }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="admin_reply" label="管理员回复" />
        </el-table>
    </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue';
import { feedbackApi, journalApi } from '@/request/apiService';
import { ElTag, ElMessage } from 'element-plus'; // 确保 ElTag 和 ElMessage 已导入

const form = reactive({
    feedbackType: '',
    selectedJournalId: null,
    feedbackContent: '',
});

// 期刊列表和反馈列表
const journals = ref([]);
const feedbackList = ref([]);

// 获取期刊和反馈列表
const fetchData = async () => {
    try {
        const [journalResponse, feedbackResponse] = await Promise.all([
            journalApi.getJournalList({ page: 1, pageSize: 99999 }),
            feedbackApi.getFeedbackList({ page: 1, pageSize: 10 }),
        ]);
        journals.value = journalResponse.data;
        feedbackList.value = feedbackResponse.data;
    } catch (error) {
        console.error('数据获取失败:', error);
        ElMessage.error('数据获取失败，请稍后再试。');
    }
};

// 提交反馈
const submitFeedback = async () => {
    // 基本表单验证
    if (!form.feedbackType || (form.feedbackType === 'journal' && !form.selectedJournalId) || !form.feedbackContent) {
        ElMessage.warning('请填写所有必填项。');
        return;
    }

    const payload = {
        feedback_type: form.feedbackType,
        content: form.feedbackContent,
        journal_id: form.feedbackType === 'journal' ? form.selectedJournalId : null,
    };

    try {
        await feedbackApi.submitFeedback(payload);
        ElMessage.success('反馈提交成功！');
        Object.assign(form, {
            feedbackType: '',
            selectedJournalId: null,
            feedbackContent: '',
        });
        fetchData();
    } catch (error) {
        console.error('提交反馈失败:', error);
        ElMessage.error('提交反馈失败，请稍后再试。');
    }
};

const handleFeedbackTypeChange = (value) => {
    if (value !== 'journal') {
        form.selectedJournalId = null;
    }
};

// 状态值到中文标签的映射
const getStatusLabel = (status) => {
    const statusMap = {
        pending: '待处理',
        replied: '已回复',
        closed: '已关闭',
    };
    return statusMap[status] || '未知状态';
};

// 状态值到标签类型的映射
const getStatusTagType = (status) => {
    const typeMap = {
        pending: 'warning', // 黄色
        replied: 'info',    // 蓝色
        closed: 'success',  // 绿色
    };
    return typeMap[status] || 'info';
};

onMounted(fetchData);
</script>

<style scoped>
.feedback-section {
    font-family: Arial, sans-serif;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.feedback-section h3 {
    margin-bottom: 20px;
    font-size: 24px;
    font-weight: bold;
    color: #333;
}

.feedback-form {
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.form-select {
    width: 100%;
}

.submit-btn {
    width: 100%;
    font-size: 16px;
    padding: 10px;
    background-color: #3498db;
    color: white;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.submit-btn:hover {
    background-color: #2980b9;
}

.feedback-table {
    margin-top: 20px;
    border-radius: 8px;
}

.el-table {
    background-color: #fff;
}

.el-table-column {
    padding: 10px;
}
</style>
